<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
            /* border: 1px solid black; */
        }
        .mi input{
            width: 223px;
            height: 48px;
            /* 向右移动文字 */
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            outline: none;

        }
        .mi .search{
            border: 1px solid #e4c296;
        }

        .result-list {
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #e4c296;
            border-top: 0;
            background: #fff;
            /* height: 100px; */
        }
        .result-list a{
            display: block;
            /* 没设定宽高 默认会使用父类的宽高 */
            padding: 6px 15px;
            font-size: 12px;
            color: grey;
            text-decoration: none;
        }
        .result-list a:hover{
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div class="mi">
     <input type="search" placeholder="我是个搜索框">
        <ul class="result-list">
            <li><a href="#">玉子的爱情故事</a></li>
            <li><a href="#">天气之子</a></li>
            <li><a href="#">你的名字</a></li>
            <li><a href="#">别让我知道你的名字</a></li>
        </ul>
   </div>

   <script>
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
        const a = document.querySelectorAll('a')

        ul.style.display = 'none'

        input.addEventListener('focus',function(){         
            ul.style.display = 'block'
            input.classList.add('search')
        })
        input.addEventListener('blur',function(){
            setTimeout(() => {
                ul.style.display = 'none'
                input.classList.remove('search')
            }, 120);
        })

        ul.addEventListener('click',function(event){
            event.preventDefault()
            const title = event.target.closest('a').textContent
            console.log(title)
            input.placeholder = title
        })
   </script>
</body>
</html>